<template>
	<view class="box u-skeleton">
		<view class="top">
			<u-navbar :is-back="true" title="确认订单" :border-bottom="false"></u-navbar>
		</view>
		<view class="selectAddress container_br u-skeleton-rect">
			<view class="addressBox" v-if="address" @click="onShowAddress()">
				<view class="address">
					<view class="dwiocn">
						<u-icon :name="'/static/icons/dw.png'" size="32"></u-icon>
					</view>
					<view class="content">
						{{address.address}}
					</view>
					<view class="arrow">
						<u-icon size="32" name="arrow-right" color="#666"></u-icon>
					</view>
				</view>
				<view class="userInfo">
					<span class="name">{{address.name}}</span> <span class="phone">{{address.phone}}</span>
				</view>
			</view>

			<view class="goAddress" v-if="!address&addressList.length==0" @click="goAddress">
				<view class="title">
					去添加地址
				</view>
				<view class="icon">
					<u-icon :name="'/static/icons/add.png'" size="42"></u-icon>
				</view>
			</view>

		</view>
		<!-- 商品区域 -->
		<view class="goodsInfo container_br u-skeleton-rect" v-if="goodsInfo">
			<view class="goods flc" v-for="item in goodsInfo" :key="item.id">
				<view class="left">
					<image :src="item.images_format[0]" mode="widthFix" style="width: 160rpx;"></image>
				</view>
				<view class="right">
					<view class="name">
						{{item.name}}
					</view>
					<view class="type jsbc" v-if="item.skuInfo.goods_props">
						<view class="title">
							类型
						</view>
						<view class="name">
							{{item.skuInfo.goods_props[0].value.name}}
						</view>
					</view>
					<view class="price_num jsbc">
						<view class="price">
							￥{{item.min_price||item.price}}
						</view>
						<view class="num">
							X{{item.total_num}}
						</view>
					</view>
				</view>
			</view>
			<view class="totalPrice cell jsbc">
				<view class="titleDesc">
					商品总价
				</view>
				<view class="price">
					￥{{orderInfo.order.order_total_price}}
				</view>
			</view>
			<view class="pointBox cell jsbc">
				<view class="left flc" @click="showRule = true">
					<span>积分抵扣</span>
					<u-icon class="ml1" name="info-circle" size="32" color="#999"></u-icon>
				</view>
				<view class="right flc">
					<span class="cxc fz32" v-if="isUsePoints">-￥{{orderInfo.order.pointsMoney}}</span>
					<u-switch class="ml2" v-model="isUsePoints" active-color="#FF443D" inactive-color="#eee"
						@change="isOpen"></u-switch>
				</view>
			</view>
			<view class="expree cell jsbc">
				<view class="left">
					配送费
				</view>
				<view class="right">
					<span v-if="Number(orderInfo.order.express_price)==0">包邮</span>
					<span v-else class="cxc fz32">-￥{{orderInfo.express_price}}</span>
				</view>
			</view>
			<view class="totalDesc cell">
				<view class="desc">
					共1件商品 合计：<span class="price">￥{{orderInfo.order.order_pay_price}}</span>
				</view>
			</view>
		</view>
		<view class="remarkBox container_br u-skeleton-rect">
			<view class="title">
				订单备注(选填)
			</view>
			<view class="remark">
				<textarea v-model="remark" placeholder="请输入备注消息" />
			</view>
		</view>
	
		<view class="payItemView container_br u-skeleton-rect">
			<view class="payTypeTitme">请选择支付方式</view>
			<view class="payTypeItem mtb2 jsbc" @click="onSelecteds(1)">
				<view class="left flc">
					<u-icon name="/static/icons/weixin.png" size="50"></u-icon>
					<view class="payTypeTitle ml1">微信支付</view>
				</view>
				<view class="right">
					<u-icon name="/static/icons/selected.png" size="40" v-if="payType == 1"></u-icon>
					<u-icon name="/static/icons/unselected2.png" size="40" v-else></u-icon>
				</view>
			</view>
		</view>
		<view class="H150">

		</view>
		<view class="submitBox jsbc">
			<view class="totalPrice">
				实付<span class="price">￥{{totalPrice}}</span>
			</view>
			<view class="detail_btn flc">
				<view class="detail" @click="()=>this.show=true">
					<span>明细</span>
					<u-icon class="ml1" name="arrow-up" size="32" color="#999"></u-icon>
				</view>
				<view class="btn ml2" @click="onOrderPayment">
					提交订单
				</view>
			</view>
		
		</view>
		<!-- 支付方式 -->
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="28">
			<view class="popBox" v-if="orderInfo.order">
				<view class="total_price">
					金额明细
				</view>
				<view class="payItemView">
					<view class="payTypeItem jsbc">
						<view class="left flc">
							商品总价
						</view>
						<view class="right">
							￥{{orderInfo.order.order_total_price}}
						</view>
					</view>
					<view class="payTypeItem jsbc">
						<view class="left flc">
							积分抵扣
						</view>
						<view class="right">
							<span class="cxc">-￥{{orderInfo.order.pointsMoney}}</span>
						</view>
					</view>
					<view class="payTypeItem jsbc">
						<view class="left flc">
							合计
						</view>
						<view class="right">
							<span>￥{{orderInfo.order.order_pay_price}}</span>
						</view>
					</view>
				</view>
				<view class="pay" @click="show=false">
					确定
				</view>
			</view>
		</u-popup>
		<addressPopup ref="address" :address-list="addressList" @select="onSelected" @edit="onEditAddress"
			@add="onNewAddress"></addressPopup>
		<u-popup v-model="showRule" mode="center" width="600rpx" border-radius="20">
			<view class="popBoxs">
				<scroll-view scroll-y="true" style="max-height: 450rpx;">
					<view class="content">
						{{setting}}
					</view>
				</scroll-view>
				<view class="know btn" @click="showRule =false">
					知道了
				</view>
			</view>
		</u-popup>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import {
		OrderShow,
		createOrder,
		getSystem,
		getAddressList
	} from '@/api/index.js'
	import {
		useCartStore
	} from '../../stores/index.js'
	import baseUrl from '@/config/config.js'
	import addressPopup from "@/components/address-popup.vue"
	import {
		toast,
		toastC,
		tiao
	} from '@/utils/common.js'
	export default {
		components: {
			addressPopup
		},
		data() {
			return {
				cartFuc: useCartStore(),
				show: false,
				showRule: false,
				payType: "",
				goodsInfo: "",
				address: "",
				addressList: [],
				default: false,
				addressId: "",
				totalPrice: "",
				remark: "",
				isUsePoints: false,
				goods_sku_id: "",
				goods_number: "",
				goods_id: '',
				orderInfo: "",
				loading: true,
				setting: "",
				type: "",
				cartId: ""

			};
		},
		onLoad(res) {
			console.log(res);
			this.type = res.type
			if (res.type == 1) {
				let order = this.cartFuc.order
				this.goods_id = order.id,
					this.goods_number = order.num,
					this.goods_sku_id = order.skusInfo ? order.skusInfo._id : "",
					this.getData()
			} else {
				this.cartId = this.cartFuc.cartList.toString()
				console.log(this.cartId);
				this.getData()
			}

		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.initAddress()
			},
			initAddress() {
				let self = this;
				getAddressList().then(res => {
					console.log("获取地址", res);
					self.addressList = res.data;
				})
			},

			onShowAddress() {
				this.$refs.address.open();
			},
			onNewAddress() {
				// this.$utils.jump('/other/add-address/add-address?type=0');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=0'
				})
			},
			onSelected(item) {
				this.address = item;
				this.addressId = item.id;
			},
			onEditAddress(item) {
				// this.$utils.jump(');
				uni.navigateTo({
					url: '/other/add-address/add-address?type=1&id=' + item.id
				})
			},
			goAddress() {
				uni.navigateTo({
					url: '/other/delivery-address/delivery-address'
				})
			},

			//选择支付方式
			onSelecteds(i) {
				this.payType = i
			},
			getData() {
				this.loading = true
				let obj = {}
				if (this.type == 1) {
					obj = {
						goods_id: this.goods_id,
						goods_number: this.goods_number,
						mode: "buy-now",
						goods_sku_id: this.goods_sku_id,
						isUsePoints: this.isUsePoints ? 1 : 0
					}
				} else {
					obj = {
						mode: "cart",
						cartIds: this.cartId,
						isUsePoints: this.isUsePoints ? 1 : 0
					}
				}
				OrderShow(obj).then(res => {
					console.log(res);
					this.orderInfo = res.data
					this.goodsInfo = res.data.order.goodsList
					this.address = res.data.order.address
					if(res.data.order.address){
						this.addressId = res.data.order.address.id
					}
					this.totalPrice = res.data.order.order_price
					this.loading = false
					this.setting = res.data.setting.points_describe
				})
			},
			isOpen(e) {
				this.isUsePoints = e
				this.getData()
			},
			onOrderPayment() {
				if (!this.addressId == 1 || this.addressId == null) {
					toast('请选择收货地址')
					return
				}
				if (this.payType == '' || this.payType == null) {
					toast('请选择支付方式')
					return
				}
				if (this.goodsInfo.stock < 1) {
					toast("库存不足");
					return;
				}
				let obj = {}
				if (this.type == 1) {
					obj = {
							goods_id: this.goods_id,
							goods_sku_id: this.goods_sku_id || "",
							goods_number: this.goods_number,
							mode: "buy-now",
							delivery_address_id: this.addressId,
							remark: this.remark,
							payType: 20
					}
				} else {
					obj = {
						mode: "cart",
						cartIds: this.cartId,
						delivery_address_id: this.addressId,
						remark: this.remark,
						payType: 20
					}
				}
				createOrder(obj).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.redirectTo({
							url: '/page/payment/payment?' + 'money=' + this.totalPrice + '&params=' + JSON
								.stringify(res.data.pay_params)
						});
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectAddress {
		.addressBox {
			box-sizing: border-box;
			padding: 0 20rpx;
			color: #333;
			font-size: 28rpx;

			.address {
				display: flex;
				align-items: flex-start;
			}

			.address .dwiocn {
				height: 32rpx;
				margin-top: 8rpx;
			}

			.address .arrow {
				height: 32rpx;
				margin-top: 8rpx;
			}

			.address .content {
				height: 96rpx;
				width: 560rpx;
				line-height: 48rpx;
				font-size: 32rpx;
			}

			.userInfo {
				margin-top: 10rpx;
			}

			.userInfo .phone {
				margin-left: 40rpx;
			}
		}

		.goAddress {
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				height: 42rpx;
				font-size: 32rpx;
			}

			.icon {
				height: 42rpx;
				margin-left: 10rpx;
			}
		}
	}

	.goodsInfo {
		.goods .left {
			width: 160rpx;
			height: 160rpx;
		}

		.goods .right {
			height: 480rpx;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 40rpx;

			.name {
				font-size: 32rpx;
				color: #333;
			}

			.type {
				font-size: 26rpx;
				color: #666;
			}

			.price_num {
				width: 480rpx;
			}

			.price_num .price {
				font-size: 36rpx;
				color: #FA453CFF;
			}
		}

		.cell {
			padding: 20rpx 0;
			border-top: 1rpx solid #dedede;
		}

		.totalPrice {
			margin-top: 20rpx;

			.price {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.coupons .price {
			font-size: 32rpx;
			color: #FA453C;
		}

		.totalPrice .titleDesc,
		.coupons .titleDesc {
			font-size: 28rpx;
			color: #333333;
		}

		.totalDesc {
			display: flex;
			flex-direction: row-reverse;

			.price {
				font-weight: 600;
				font-size: 36rpx;
			}
		}
	}

	.remarkBox {
		.title {
			font-size: 32rpx;
			color: #333;
		}

		.remark {
			margin-top: 20rpx;
		}
	}

	.submitBox {
		width: 750rpx;
		height: 116rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 10rpx 0rpx rgba(153, 153, 153, 0.2);
		box-sizing: border-box;
		padding: 13rpx 20rpx 33rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.totalPrice {
			font-size: 30rpx;
			color: #333;

			.price {
				font-size: 36rpx;
				color: #FA453CFF;
				margin-left: 10rpx;
			}
		}

		.btn {
			text-align: center;
			line-height: 70rpx;
			color: #fff;
			font-size: 26rpx;
			width: 200rpx;
			height: 70rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 35rpx;
		}
	}


	// 支付方式
	.popBox {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		height: 720rpx;
		position: relative;

		.total_price {
			margin-top: 40rpx;
			text-align: center;
			font-size: 56rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;

			.icon {
				font-size: 36rpx;
			}
		}

		.payTypeTitle {
			margin-left: 20rpx;
		}

		.left {
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
		}

		.right {
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
		}

		.pay {
			position: absolute;
			bottom: 40rpx;
			left: 30rpx;
			width: 690rpx;
			height: 80rpx;
			background: #6BC665;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 35rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}

	}

	.popBoxs {
		width: 600rpx;
		max-height: 450rpx;
		min-height: 160rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;

		.content {
			font-size: 30rpx;
			color: #333333;
		}

		.know {
			width: 240rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #FD4120, #F47749);
			border-radius: 36rpx;
			line-height: 72rpx;
			color: #fff;
			margin: 40rpx auto;
		}
	}
</style>